<template>
  <div class="the-swiper">
    <van-swipe :autoplay="2000" class="swiper">
      <van-swipe-item v-for="(item, index) in banners" :key="index">
        <img v-lazy="item.imageUrl ? item.imageUrl : item.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
  export default {
    props:{
      banners:{
        type: Array
      }
    }
  }
</script>

<style scoped>
.the-swiper{
  position: relative;
  height: 40vw;
  top: 15px;
  display: flex;
  justify-content: center;
}

.swiper {
  position: absolute;
  height: 40vw;
  width: 92vw;
  border-radius: 8px;
  overflow: hidden;
}

.swiper img {
  width: 100%;
  height: 100%;
}
</style>